<template>
  <div  class="top">
    <div class="box">
       <el-tabs v-model="activeName">
    <el-tab-pane label="密码登录" name="first">
      <input class="tel" type="text" placeholder="用户名/邮箱" v-model="username"><br>
        <input class="pw" :type="type" placeholder="密码" v-model="password"><span class="iconfont tb" :class="ico" @click="change"></span>
        <button @click="login">登录</button>
        <div class="text1">
            <router-link to="/home">返回首页</router-link>
        </div>
        <div class="text2">
            <input type="checkbox" v-model="checked1"><i>我已同意<em>《服务条款》</em>和<em>《隐私协议》</em></i>
        </div> 
    </el-tab-pane>
    <el-tab-pane label="注册账号" name="second">
      <input class="tel" type="text" placeholder="用户名/邮箱" v-model="username2"><br>
        <input class="pw" :type="type" placeholder="密码" v-model="password2"><span class="iconfont tb " :class="ico" @click="change"></span>
        <p v-show="showInfo2">请输入8-16位字符，至少包含数字、大写字母、小写字母、特殊字符中的三种类型</p>
        <input class="pw" :type="type" placeholder="确认密码" v-model="password3">
        <p v-show="password2 == password3? false:true">请与上面密码一致</p>
        <div>
            <input class="num" type="type" v-model="code">
            <div class="img" @click="refreshCode">
                <Identify :identifyCode="identifyCode"></Identify>
            </div>
        </div>
        <button @click="register">注册</button>
        <div class="text1">
            <router-link to="/home">返回首页</router-link>
        </div>
        <div class="text2">
            <input type="checkbox" v-model="checked2"><i>我已同意<em>《服务条款》</em>和<em>《隐私协议》</em></i>
        </div> 
    </el-tab-pane>
   
  </el-tabs>
    </div>
  
  </div>                     
</template>

<script>
import '@/assets/js/yinhua'
import Identify from './Identify.vue'
export default {
    name: "Login",
    components: { Identify },
    data() {
        return {
            activeName: "first",
            username: "",
            username2: "",
            password: "",
            password2: "",
            password3: "",
            code:"",
            checked1:false,
            checked2: false,
            ico: "icon-hide",
            type: "password",
            showInfo1: false,
            showInfo2: false,
            //图片验证码
            identifyCode:'',
            //验证码规则
            identifyCodes:'123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
        };
    },
    methods: {
        change() {
            if (this.ico == "icon-hide") {
                this.ico = "icon-browse";
                this.type = "text";
            }
            else if (this.ico == "icon-browse") {
                this.ico = "icon-hide";
                this.type = "password";
            }
        },
        //切换验证码
        refreshCode(){
            this.identifyCode = '',
            this.makeCode(this.identifyCodes,4)
            console.log(this.identifyCode)
        },
        //生成随机验证码
        makeCode(o, l) {
            for (let i = 0; i<l; i++) {
                this.identifyCode += this.identifyCodes[
                    Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
                    ]
            }
        },
        async register() {
            const { username2, password2 , password3,checked2} = this;
            if(this.identifyCode!== this.code){
                alert("验证码有误")
            }else if(username2 && password2 && password2 == password3 && checked2){
                try{
                    console.log('aaaa')
                    await this.$store.dispatch("registerUser",{username2,password2});
                    console.log('bbbb')
                    this.$router.go(0)
                }catch(error){
                    alert(error.message)
                }
            }
        },
        async login() {
            const { username,password,checked1} = this
            if(checked1==false){
                alert('请勾选服务条款和隐私协议')
            }else if(username&&password){
                try{
                    await this.$store.dispatch("userLogin",{username,password});
                    this.$router.push('./home')
                }catch(error){
                    alert(error.message)
                }
            }
            
        }
    },
    watch: {
        password2() {
            if ((/((^(?=.*[a-z])(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z\W]{8,16}$))/.test(this.password2))) {
                this.showInfo2 = false;
            }
            else {
                this.showInfo2 = true;
            }
        },
    },
    mounted(){
        this.refreshCode()
    }
}
</script>

<style scoped>
    .top{
    height: 710px;
    background-image: url("@/assets/images/17.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    padding-top: 100px;
    
}
.box{
    width: 400px;
    height: 520px;
    border: 1px solid black;
    border-radius: 5%;
    margin: auto;
    background-color: white;
    opacity: 0.8;
    padding-top: 40px;
    padding-left: 40px;
}
 .tel{
    margin: 20px 0 0px 15px;
    padding-left: 5px;
    width: 300px;
    height: 45px;
    border-radius: 5%;
    font-size: 15px;
    background-color: rgb(230, 218, 218);
}
.pw{
    margin: 10px 0 5px 15px;
    width: 300px;
    height: 45px;
    border-radius: 5%;
    font-size: 15px;
    padding-left: 5px;
    background-color: rgb(230, 218, 218);
}
p{  
    color: red;
}
.tb{
    margin-left: -30px;
    font-size: 20px;
}
.num{
    float: left;
    margin: 15px 10px 15px 15px;
    width: 160px;
    height: 45px;
    border-radius: 5%;
    font-size: 25px;
    padding-left: 5px;
    background-color: rgb(230, 218, 218);
}
.img{
    float: left;
    width: 80px;
    height: 40px;
    margin-top: 18px;
    cursor: pointer;
}
button{
    margin: 10px 0 10px 15px;
    width: 300px;
    height: 45px;
    border-radius: 35%;
    font-size: 15px;
    background-color: rgb(204, 141, 95);
    color: white;
    font-size: 18px;
}
button:hover{
    background-color: rgb(235, 111, 23);
}
.text1{
    font-size: 14px;
    margin-left: 250px;
}
.text1 a{
    color: gray;
    margin: 0 5px 40px 5px;
}
.text2{
    margin: 5px 0 0 60px;
    color: gray;
}
i{
    margin-left: 5px;
}
.text2 em{
    color: skyblue;
}
 /* 图片经过放大 */
 img{
    overflow: hidden;
    transition: all 0.8s;
 }
 img:hover{
    transform: scale(1.1)
 }
</style>